<html>
<head>
    <title>hello</title>
    <link href="/static/js/select2/select2.css" rel="stylesheet">
    <script src="/static/js/jquery/jquery-2.1.0.min.js"></script>
    <script src="/static/js/select2/select2.min.js"></script>
    <!--<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />-->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>-->
</head>
<body>
<div style="align-content: center">
    <input id="select2" type="text"><br>
    <input type="button" onclick="aaa()">
    <!--<select id="select2" style="width: 200px;">-->
    <!--</select>-->
</div>
</body>
<script type="application/javascript">
    $(document).ready(function () {
        $("#select2").select2({
            placeholder: "Select report type", //提示语
            ajax: {
                url: "/data",
                dataType: 'json',
                type: "POST",
                data: function (term, page) {
                    console.log(term);
                    return {
                        sSearch: term //{# term为前台输入的查询关键字，保存到sSearch对象，即后台保存关键字的对象 #}
                    };
                },
                results: function (data, page) {
                    var dataObj =eval(data);
                    console.log(dataObj);
                    console.log(page);
                    return {
                        results: dataObj  //{# results结果集，data为后台返回的查询结果 #}
                    };
                },
                formatResult: function (data, params) {
                    console.log(data);
                    console.log(params);
                    return data.name;
                }
            },
            templateSelection: function (state) {
                alert(state);
                console.log(state.id);
                console.log(state.text);
            }
        });


        $("#select2").on("change", function (e) {
            alert($(this).val());
        })
    });

    function aaa() {
        var val = $("#select2").val();
        alert(val);
    }
</script>
</html>